@using System.Web.Optimization
@using Resources
@using VocaDb.Model.Domain
@using VocaDb.Web.Code
@using VocaDb.Web.Helpers
@using VocaDb.Web.Resources.Domain
@using Res = ViewRes.Search.IndexStrings;
@using SharedRes = ViewRes.SharedStrings;
@inherits VocaDbPage<VocaDb.Web.Models.Search.SearchIndexViewModel>

@section Head {
	<link rel="stylesheet" href="@Url.Content("~/Content/Styles/songlist.css")" type="text/css" />
}

@helper SearchCategory(EntryType entryType, string title) {
	<li data-bind="css: { active: searchType() == '@entryType.ToString()' }">
		<a href="#" data-bind="click: function() { searchType('@entryType.ToString()'); }">@title</a>
	</li>
}

<ul class="nav nav-pills">
	<li data-bind="css: { active: searchType() == 'Anything' }">
		<a href="#" data-bind="click: function() { searchType('Anything'); }">@EntryTypeNames.Undefined</a>
	</li>
	<li data-bind="css: { active: searchType() == 'Artist' }">
		<a href="#" data-bind="click: function() { searchType('Artist'); }">@ViewRes.SharedStrings.Artists</a>
	</li>
	<li data-bind="css: { active: searchType() == 'Album' }">
		<a href="#" data-bind="click: function() { searchType('Album'); }">@ViewRes.SharedStrings.Albums</a>
	</li>
	<li data-bind="css: { active: searchType() == 'Song' }">
		<a href="#" data-bind="click: function() { searchType('Song'); }">@ViewRes.SharedStrings.Songs</a>
	</li>
	@SearchCategory(EntryType.ReleaseEvent, ViewRes.SharedStrings.ReleaseEvents)
	@SearchCategory(EntryType.Tag, ViewRes.SharedStrings.Tags)
</ul>

<div id="anythingSearchTab" class="form-horizontal well well-transparent">

	<div class="pull-right">
		@SearchDropDown("showArtistSearch", "artistSearchViewModel", Translate.ArtistSortRuleNames.ValuesAndNamesStrings)
		@SearchDropDown("showAlbumSearch", "albumSearchViewModel", Translate.AlbumSortRuleNames.ValuesAndNamesStrings)
		@SearchDropDown("showSongSearch", "songSearchViewModel", Translate.SongSortRuleNames.ValuesAndNamesStrings)
		@SearchDropDown("showEventSearch", "eventSearchViewModel", Translate.EventSortRuleNames.ValuesAndNamesStrings)

		<div class="inline-block" data-bind="visible: showAlbumSearch(), with: albumSearchViewModel">
			<div class="btn-group">
				<a data-bind="css: { active: viewMode() == 'Details' }, click: function() { viewMode('Details'); }" class="btn btn-nomargin" href="#" title="@Res.AlbumDetails">
					<i class="icon-list"></i>
				</a>
				<a data-bind="css: { active: viewMode() == 'Tiles' }, click: function() { viewMode('Tiles'); }" class="btn btn-nomargin" href="#" title="@Res.AlbumTiles">
					<i class="icon-th"></i>
				</a>
			</div>
		</div>

		<div class="inline-block" data-bind="visible: showSongSearch(), with: songSearchViewModel">
			<div class="btn-group">
				<a data-bind="css: { active: viewMode() == 'Details' }, click: function() { viewMode('Details'); }" class="btn btn-nomargin" href="#" title="@Res.AlbumDetails">
					<i class="icon-th-list"></i>
				</a>
				<a data-bind="css: { active: viewMode() == 'PlayList' }, click: function() { viewMode('PlayList'); }" class="btn btn-nomargin" href="#" title="@Res.Playlist">
					<i class="icon-list"></i>
				</a>
			</div>
		</div>

		<div class="inline-block" data-bind="visible: showTagFilter()">
			<a data-bind="css: { active: showTags() }, click: function() { showTags(!showTags()); }" class="btn btn-nomargin" href="#" title="@Res.ShowTags">
				<i class="icon-tags"></i>
			</a>
		</div>

	</div>

	<div class="control-label">
		<i class="icon-search"></i>
	</div>
	<div class="control-group">
		<div class="controls">
			<div class="input-append">
				<input type="text" data-bind="textInput: searchTerm" class="input-xlarge" placeholder="@Res.TypeSomething" />
				<button class="btn btn-danger" data-bind="click: function() { searchTerm(''); }, visible: searchTerm">@SharedRes.Clear</button>
				&nbsp;
			</div>
			<button class="btn" data-bind="click: function() { showAdvancedFilters(!showAdvancedFilters()); }, css: { active: showAdvancedFilters }">
				@Res.MoreFilters
				<span class="caret"></span>
			</button>
		</div>
	</div>

	<div data-bind="visible: showAdvancedFilters" style="display: none;">
		<!-- Tag filtering with top genres -->
		<div class="control-group" data-bind="visible: showTagFilter">
			<div class="control-label">@ViewRes.SharedStrings.Tag</div>
			<div class="controls" data-bind="with: tagFilters">
				@KnockoutHelpers.TagFilters(true)
			</div>
		</div>

		@{ Html.RenderPartial("Partials/_ArtistSearchOptions"); }

		@{ Html.RenderPartial("Partials/_AlbumSearchOptions"); }

		@{ Html.RenderPartial("Partials/_SongSearchOptions"); }
		
		@{ Html.RenderPartial("Partials/_EventSearchOptions"); }

		<!-- Tag search options -->
		<div class="control-group" data-bind="visible: showTagSearch, with: tagSearchViewModel">
			<div class="control-label">@Res.TagCategory</div>
			<div class="controls">
				<div class="input-append">
					@KnockoutHelpers.LockingAutoComplete("tagCategoryAutoComplete", "categoryName", extraBindings: "clearValue: true")
				</div>
			</div>
		</div>
		
		<!-- Checkboxes -->
		<div class="control-group">
			<div class="controls">
				
				<div data-bind="visible: showArtistSearch, with: artistSearchViewModel">
					<label class="checkbox" data-bind="visible: loggedUserId">
						<input type="checkbox" data-bind="checked: onlyFollowedByMe" />
						@Res.OnlyMyFollowedArtists
					</label>
				</div>

				<div data-bind="visible: showSongSearch, with: songSearchViewModel">
					<label class="checkbox">
						<input type="checkbox" data-bind="checked: pvsOnly" />
						@Res.OnlyWithPVs
					</label>

					<label class="checkbox" data-bind="visible: loggedUserId">
						<input type="checkbox" data-bind="checked: onlyRatedSongs" />
						@Res.InMyCollection
					</label>
				</div>
				
				<div data-bind="visible: showEventSearch, with: eventSearchViewModel">
					<label class="checkbox" data-bind="visible: loggedUserId">
						<input type="checkbox" data-bind="checked: onlyMyEvents" />
						@Res.OnlyMyEvents
					</label>
				</div>

				<label class="checkbox" data-bind="visible: showDraftsFilter">
					<input type="checkbox" data-bind="checked: draftsOnly" />
					@ViewRes.EntryIndexStrings.OnlyDrafts
				</label>

			</div>
		</div>

	</div>

</div>

@{ Html.RenderPartial("Partials/_AnythingSearchList"); }

@{ Html.RenderPartial("Partials/_ArtistSearchList"); }

<div data-bind="visible: showAlbumSearch, with: albumSearchViewModel">
	@{ Html.RenderPartial("Partials/_AlbumSearchList"); }
</div>

<div data-bind="visible: showSongSearch, with: songSearchViewModel">
	@{ Html.RenderPartial("Partials/_SongSearchList"); }
</div>

<div data-bind="visible: showEventSearch, with: eventSearchViewModel">
	@{ Html.RenderPartial("Partials/_EventSearchList"); }
</div>

@{ Html.RenderPartial("Partials/_TagSearchList"); }


<!-- Scripts -->
@section BodyScripts {
	@Scripts.Render("~/bundles/Search/Index")
	<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

	<script type="text/javascript">

		$(function () {

			moment.locale('@Culture');
			var cultureCode = '@UICulture';
			var languageSelection = '@UserContext.LanguagePreference';
			var query = @Html.Raw(JsonHelpers.Serialize(Model.Filter));
			var tagIds = @ToJS(Model.TagId);
			var searchType = '@Model.SearchTypeName';
			var sort = '@Model.Sort';
			var artistId = @ToJS(Model.ArtistId);
			var childTags = @ToJS(Model.ChildTags);
			var childVoicebanks = @ToJS(Model.ChildVoicebanks);
			var eventId = @ToJS(Model.EventId);
			var artistType = '@Model.ArtistType';
			var discType = '@Model.DiscType';
			var songType = '@Model.SongType';
			var eventCategory = '@Model.EventCategory';
			var onlyWithPVs = @ToJS(Model.OnlyWithPVs);
			var onlyRatedSongs = @ToJS(Model.OnlyRatedSongs);
			var since = @ToJS(Model.Since);
			var minScore = @ToJS(Model.MinScore);
			var viewMode = '@Model.ViewMode';
			var autoplay = @ToJS(Model.Autoplay);
			var shuffle = @ToJS(Model.Shuffle);
			var pageSize = @ToJS(Model.PageSize);
			var loggedUserId = @ToJS(Login.Manager.LoggedUserId);
			var unknownPictureUrl = '@Url.Content("~/Content/unknown.png")';

			var rootPath = '@RootPath';
			var urlMapper = new vdb.UrlMapper(rootPath);
			var repoFactory = new vdb.repositories.RepositoryFactory(urlMapper, @LanguagePreferenceInt, loggedUserId);
			var resourceRepo = repoFactory.resourceRepository();
			var entryRepo = repoFactory.entryRepository();
			var artistRepo = repoFactory.artistRepository();
			var albumRepo = repoFactory.albumRepository();
			var songRepo = repoFactory.songRepository();
			var eventRepo = repoFactory.eventRepository();
			var tagRepo = repoFactory.tagRepository();
			var userRepo = repoFactory.userRepository();
			var pvPlayerElem = $("#pv-player-wrapper")[0];
			var pvPlayersFactory = new vdb.viewModels.pvs.PVPlayersFactory(pvPlayerElem);

			var vm = new vdb.viewModels.search.SearchViewModel(urlMapper, entryRepo, artistRepo, albumRepo, songRepo,
				eventRepo,
				tagRepo, resourceRepo,
				userRepo,
				unknownPictureUrl,
				languageSelection, loggedUserId, cultureCode, searchType, query, tagIds, sort,
				artistId,
				childTags,
				childVoicebanks,
				eventId,
				artistType, discType, songType,
				eventCategory,
				onlyWithPVs,
				onlyRatedSongs,
				since,
				minScore,
				viewMode,
				autoplay,
				shuffle,
				pageSize,
				pvPlayersFactory);
			ko.applyBindings(vm);

		});

	</script>

}

@helper SearchDropDown(string visibleBinding, string viewModel, Dictionary<string, string> sortRules) {
	@:@KnockoutHelpers.SearchDropDown(visibleBinding, viewModel, sortRules)
}